<template>
  <div class="detail">
    <van-nav-bar
      :title="bookDetail.name"
      left-text="返回"
      right-text="···"
      @click-left="backToHome()"
      left-arrow
      
    />

    <van-image width="20rem" height="15rem" fit="fill" :src="myImg" />
    <van-card
      :price="parseFloat(bookDetail.price).toFixed(2)"
      :desc="bookDetail.author"
      :title="bookDetail.name"
    >
      <template #tags>
        <van-tag plain type="primary">{{bookDetail.publisher}}</van-tag>
        <br/>
        <br>
        <van-tag type="danger">{{ bookDetail.category }}</van-tag>
        
        
      </template>
    </van-card>
    <span class="des" v-html="bookDetail.description"> </span>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goShopCar()" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        
      />
    </van-goods-action>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  created: function () {
    //   alert(this.$route.params.get(tId))
    let _this = this;
    //   axios.get("/json/details/"+this.$route.params.toId+".json").then(function (resp){
    //       _this.bookDetail = resp.data
    //   })
    axios.get("/json/details/" + this.$route.params.toId + ".json").then(function (resp) {
      _this.bookDetail = resp.data;
      _this.myImg = "http://localhost:8081/" + _this.bookDetail.img;
      //   _this.descri = JSON.parse(_this.bookDetail.description)
    });
  },
  data() {
    return {
      bookDetail: {},
      myImg: "",
      descri: "",
    };
  },
  methods: {
      goShopCar: function() {
          this.$router.push('shopCar')
      },
      backToHome: function() {
          this.$router.back()
      }
  }
};
</script>


<style scoped>
.van-card {
  text-align: left;
}

.des {
  border-collapse: collapse;
  line-height: 1.8;
  text-align: left;
  float: left;
  font-size: 15px;
}
</style>